<!-- 合约信息 -->
<template>
	<a-descriptions title="企业信息" class="ant-descriptions-blockquote">
		<a-descriptions-item label="企业名称">{{ props.contractData?.enterPriseDTO?.enterPriseName }}</a-descriptions-item>
		<a-descriptions-item label="合作周期">
			{{ props.contractData?.enterPriseDTO?.beginTime }} - {{ props.contractData?.endTime }}
		</a-descriptions-item>
		<a-descriptions-item label="联系人信息">
			{{ props.contractData?.enterPriseDTO?.linkmanName }} / {{ props.contractData?.enterPriseDTO?.linkmanPhone }}
		</a-descriptions-item>
		<a-descriptions-item
			label="租金协议价"
			v-if="
				!props.contractData?.enterPriseDTO?.enterPriseTeamWordDetailsName &&
				!props.contractData?.enterPriseDTO?.discountType &&
				!props.contractData?.enterPriseDTO?.discountScale
			">
			无优惠
		</a-descriptions-item>
		<a-descriptions-item label="租金协议价" v-else>
			{{ props.contractData?.enterPriseDTO?.enterPriseTeamWordDetailsName }} /
			{{ props.contractData?.enterPriseDTO?.type === 1 ? '折扣' : '减免' }} /{{
				discountTypeMap[props.contractData?.enterPriseDTO?.discountType]
			}}{{ props.contractData?.enterPriseDTO?.discountScale }}%
		</a-descriptions-item>
	</a-descriptions>
	<a-descriptions title="基本信息" class="ant-descriptions-blockquote">
		<a-descriptions-item label="退租房间">
			当前退租{{ props.contractData?.quiteRoomNum || 1 }}（子合同{{ props.contractData?.childrenContractNum }}/已退租{{
				props.contractData?.childrenContractQuiteNum
			}}）
		</a-descriptions-item>
		<!-- <a-descriptions-item v-else label="退租房间">1</a-descriptions-item> -->
		<a-descriptions-item label="退租类型">{{ props.contractData?.terminateType ? mapTerminateType[props.contractData?.terminateType] : '-' }}</a-descriptions-item>
		<a-descriptions-item label="操作人">{{ props.contractData?.rejectName || '-' }}</a-descriptions-item>
		<a-descriptions-item label="退租时间">{{ props.contractData?.quiteDate || '-' }}</a-descriptions-item>
		<a-descriptions-item label="退租账号类型">{{ optionData[props.contractData.paymentAccountType] || '-' }}</a-descriptions-item>
		<a-descriptions-item label="退租账号">{{ props.contractData.paymentAccount || '-' }}</a-descriptions-item>
		<a-descriptions-item label="退租备注">{{ props.contractData?.quiteComment || '-' }}</a-descriptions-item>
	</a-descriptions>

	<!--单房退展示 -->
	<!-- 包租合同退 -->
	<div v-if="props.contractData.quiteBill">
		<a-typography-text strong>
			<blockquote>退租明细</blockquote>
		</a-typography-text>
		<!-- <vxe-grid ref="grid" v-bind="options" class="grid"></vxe-grid> -->
		<vxe-table :data="JSON.parse(props.contractData.quiteBill)" v-bind="options" class="bill-preview-table">
			<vxe-column type="expand" title="房间地址" width="200" align="left">
				<template #default="{row}">{{ row.address }}</template>
				<template #content="{row}">
					<vxe-table :data="row.bill" :show-header="false">
						<vxe-column width="65">
							<template #default="{row: detail}">
								<svg-icon :icon-class="`finance-${detail.feeDirection == 1 ? 'in' : 'out'}`" />
								<span v-if="detail.feeDirection === 1" v-color="{color: 'primary'}">&nbsp;收</span>
								<span v-else v-color="{color: 'danger'}">&nbsp;付</span>
							</template>
						</vxe-column>
						<vxe-column min-width="200">
							<template #default="{row: detail}">
								{{ detail.feeSubjectName }}:
								<span v-color="{color: 'primary'}">{{ detail.amount.toLocaleString() }}</span>
								元
							</template>
						</vxe-column>
						<vxe-column width="180">
							<template #default="{row}">付款日期:{{ row.payDate }}</template>
						</vxe-column>
						<vxe-column width="280">
							<template #default="{row}">费用周期:{{ row.beginDate }}至{{ row.endDate }}</template>
						</vxe-column>
					</vxe-table>
				</template>
			</vxe-column>

			<vxe-column title="账单周期" width="180" align="center">
				<template #default="{row}">{{ row.quiteDate }}~{{ row.quiteDate }}</template>
			</vxe-column>

			<vxe-column field="price" title="应收（付）/已收（付）" width="180" align="right"></vxe-column>

			<vxe-column field="total" title="待收（付）" width="100" align="right">
				<template #default="{row}">{{ row.total }}元</template>
			</vxe-column>

			<vxe-column field="quiteDate" title="应收（付）日期" width="150" align="center"></vxe-column>

			<vxe-column title="操作" width="100" align="center">
				<template #default="{row}">
					<a>明细</a>
				</template>
			</vxe-column>
		</vxe-table>
	</div>

	<!-- 包租合同退展示 -->

	<!-- 查看配置 -->
	<cost-allocation v-model:visible="record.cost" :id="props.contractData?.id"></cost-allocation>

	<!-- 附件 -->
	<!-- :biz-id="props.id" -->
	<file-upload-dialog v-model:visible="record.upload" :biz-id="props.contractData?.id" />
</template>

<script setup lang="ts">
	import {reactive, ref, onMounted} from 'vue'
	import {VxeTableProps, VxeTablePropTypes} from 'vxe-table'
	import CostAllocation from '@/components/contract/contract-detail-dialog/charter-contract/cost-allocation.vue'
	import FileUploadDialog from '@/components/common/file-upload-dialog.vue'
	import {discountTypeMap} from '@/constant/enterprise-customers'

	const props = defineProps<{
		contractData: any
		status: any
		isApproval?: boolean
		processInstanceId?: string
	}>()

	const optionData = reactive({
		1: '银行卡',
		2: '支付宝',
		3: '微信'
	})

	const record = reactive({
		cost: false,
		upload: false,
		status: '',
		disposeData: []
	})
	const mapTerminateType = {
	1: '正常退',
	2: '违约退',
	3: '协议退'
}

	// 获取审批进度信息列表
	const footerMethod: VxeTablePropTypes.FooterMethod = ({columns, data}) => {
		let total = 0
		data?.forEach((e: any) => {
			total += e.total
		})
		// 返回一个二维数组的表尾合计
		return [['合计', '', total.toFixed(2) + '元/0元', total.toFixed(2) + '元', data[0]?.quiteDate, '-']]
	}

	const options = reactive<VxeTableProps>({
		size: 'medium',
		rowConfig: {
			isHover: true
		},
		expandConfig: {
			trigger: 'row',
			showIcon: false
		},
		showFooter: true,
		footerMethod: footerMethod
	})
</script>

<style lang="less" scoped>
	.employee {
		margin-right: 10px;
	}
	.flex-container-nomal {
		display: flex;
		flex-direction: row;
		.approve {
			width: 30%;
			padding-left: 15px;
		}
	}
</style>
